<template>
  <el-dialog :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" :append-to-body="true" width="1200px" @open="open" @close="close">
    <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" :disabled="disableEditSubmit">
			<el-row>
				<el-col :span="12">
					<el-form-item :label="changeName" prop="code" :rules="rules.validateRequire" >
              <def-Ref-List ref="defaultValueRef" v-model="model.code" dataType="code" :singleSelect="true" :initDisplayData.sync="model.name" nameType="name" queryDataUrl='/appv2/appAreaInitializationConfig/queryModule' :externalQueryParam="this.queryDataParam"></def-Ref-List>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="位置" prop="index" :rules="rules.validateIntGteZero1.concat(rules.validateRequire)">
            <el-input-number v-model="model.index" :step="1" :min="minPositionNum" :max="maxPositionNum" :controls="false"  style="width:100%"  step-strictly></el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="changeModulePosition" :loading="updateLoading">更新</el-button>
    </div>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
/** 子组件 */
import defRefList from './defRefList'
/** 工具类 */
import { validateIntGteZero1 } from '@/utils/validateRule'
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  mixins: [mixin_edit],
  components: { defRefList },
  data() {
    return {
      moduleTitle: '',
      urlPrefix: '/appv2/appAreaInitializationConfig/',
      url: {
        // 额外的url
        changeModulePosition: '/appv2/appAreaInitializationConfig/changeModulePosition'
      },
       addRules: {
        validateIntGteZero1: [
          // 正整形校验
          { validator: validateIntGteZero1 }
        ]
      },
      minPositionNum: 1,
      maxPositionNum: 0,
      updateLoading: false,
      changeType: '',
      changeName: '',
      queryDataParam: { flag: '' }
    }
  },
  methods: {
     loaded() {
      // 页面加载完毕执行
        this.$set(this.model, 'index', undefined)
    },
    // 切换赋值name
    selectChanged(code) {
      if (code !== '') {
      for (var item in this.codeModel.firstDirectoryList) {
         if (this.codeModel.firstDirectoryList[item].code === code) {
            this.model.name = this.codeModel.firstDirectoryList[item].name
         }
      }
     }
    },
    changeModulePosition() {
      this.$nextTick(() => {
        // 表单校验
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$tap.confirm('是否确认更新？').then((_) => {
                this.updateLoading = true
                let param = this.model
                param.changeType = this.changeType
                getAction(this.url.changeModulePosition, param).then((res) => {
                  if (res.success) {
                    this.$message({ message: '更新成功！', type: 'success' })
                    this.visible = false
                    this.updateLoading = false
                    this.$emit('refresh')
                  } else {
                    this.$tap.alert(res.message, 'warning')
                  }
                }).catch((err) => {})
            })
          } else {
            this.$tap.alert('请填写必填信息！')
            return false
          }
        })
     })
    },
    numberChange(val, maxNum) {
           // 转换数字类型
          this.model.index = Number(val)
          // 重新渲染
          this.$nextTick(() => {
              // 比较输入的值和最大值，返回小的
              let num = Math.min(Number(val), maxNum)
              // 输入负值的情况下， = 0（可根据实际需求更改）
              if (num <= 0) {
                  this.model.index = 0
              } else {
                  // 反之
                  this.model.index = num
              }
          })
      },
     open() {
      this.visible = true
      this.title = '指定' + this.changeName + '位置'
      // 清空默认值
      this.model = {}
      // 清除表单校验
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
     },
     cancel() {
      this.visible = false
    }
  }
}
</script>

